import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { useTranslation } from 'react-i18next';
import { SvgIcon } from '@/components/icon';

const PermissionManage = React.lazy(() => import('../permission-manage'));
const KnowledgeManage = React.lazy(() => import('../knowledge-manage'));

const { Header, Content } = Layout;

// 定义权限管理子页面类型
type PermissionSubPageType = 'permission' | 'user' | 'role' | 'share';
// 定义知识管理子页面类型
type KnowledgeSubPageType = 'datasets' | 'know-gov' | 'api' | 'extension' | 'knowledge-base-approval' | 'connector' | 'approval';

const AppTest: React.FC = () => {
  const { t } = useTranslation();
  const [activeKey, setActiveKey] = useState<string>('permission');
  const [permissionSubPage, setPermissionSubPage] = useState<PermissionSubPageType>('permission');
  const [knowledgeSubPage, setKnowledgeSubPage] = useState<KnowledgeSubPageType>('datasets');

  const navItems = [
    {
      key: 'permission',
      label: '权限管理',
      icon: <SvgIcon icon="ic-management" size={24} />,
    },
    {
      key: 'knowledge',
      label: '知识管理',
      icon: <SvgIcon icon="mdi--folder-zip" size={24} />,
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    setActiveKey(key);
  };

  const handlePermissionSubPageChange = (page: PermissionSubPageType) => {
    setPermissionSubPage(page);
  };

  const handleKnowledgeSubPageChange = (page: KnowledgeSubPageType) => {
    setKnowledgeSubPage(page);
  };

  return (
    <Layout className="h-full">
      <Header className="flex items-center bg-white px-4 border-b border-gray-200">
        <Menu
          mode="horizontal"
          selectedKeys={[activeKey]}
          onClick={handleMenuClick}
          items={navItems}
          className="flex-1"
        />
      </Header>
      <Content className="p-4">
        {activeKey === 'permission' ? (
          <PermissionManage
            subPage={permissionSubPage}
            onPageChange={handlePermissionSubPageChange}
          />
        ) : (
          <KnowledgeManage
            subPage={knowledgeSubPage}
            onPageChange={handleKnowledgeSubPageChange}
          />
        )}
      </Content>
    </Layout>
  );
};

export default AppTest;
